<template>
  <GirdChildView>
    <!--左侧边栏（PC端）-->
    <div class="lg:row-span-3 lg:flex-col flex flex-row p-3  border min-w-min rounded-xl justify-evenly  items-center">
      <!--头像-->
      <update-dialog>
        <el-avatar
          :src="avatar"
          class="h-28 w-28 lg:w-20 lg:h-20 lg:m-0 m-3.5"
        />
      </update-dialog>

      <!--昵称-->
      <div class="flex text-xl min-w-fit">
        <el-input v-if="changeUserName" v-model="userData.userName"></el-input>
        <span v-if="!changeUserName" class="dark:text-green-50 min-w-fit">
            {{ userData.userName }}
          </span>
        <el-button v-if="!changeUserName" class="dark:text-green-50" text @click="changeUserName = true">修改
        </el-button>
        <el-button v-if="changeUserName" class="bg-green-500 dark:text-green-50" type="success"
                   @click="handelChangeUserName">保存
        </el-button>
      </div>

      <change-phone-num-item :phone-num="userData.phoneNum"></change-phone-num-item>

      <!--个人信息数据-->
      <div class="hidden lg:block">
        <div class="mt-2.5 w-40 flex justify-between items-center border-b-2 border-dotted">
          <span>提问数量：</span><span>{{ userData.throwQuantity }}</span></div>
        <div class="mt-2.5 w-40 flex justify-between items-center border-b-2 border-dotted">
          <span>回答数量：</span><span>{{ userData.answerQuantity }}</span></div>
        <div class="mt-2.5 w-40 flex justify-between items-center border-b-2 border-dotted">
          <span>优质提问权重：</span><span>{{ userData.userReputation }}</span></div>
        <!--        <div class="mt-2.5 w-40 flex justify-between items-center border-b-2 border-dotted">-->
        <!--          <span>好友数量：</span><span>{{ userData.likeQuantity }}</span></div>-->
      </div>

    </div>
    <!--个人信息右侧（新版）-->
    <div class="grid grid-cols-2 col-span-2">
      <div class="col-span-2 ">
        <div class="flex ">
          <reputation-item :user-data="userData"></reputation-item>
          <impact-item></impact-item>
        </div>
        <box-with-border>
          <QuestionList class="col-span-2" table-title="提问"></QuestionList>
        </box-with-border>
        <box-with-border>
          <QuestionList answer-list class="col-span-2" table-title="解答"></QuestionList>
        </box-with-border>
      </div>
    </div>

  </GirdChildView>
</template>

<script lang="ts" setup>
import BoxWithBorder from "@/components/BoxWithBorder.vue";
import GirdChildView from "@/components/childViews/GirdChildView.vue";
import ChangePhoneNumItem from "@/components/PersonalSpace/ChangePhoneNumItem.vue";
import ImpactItem from "@/components/PersonalSpace/ImpactItem.vue";
import ReputationItem from "@/components/PersonalSpace/ReputationItem.vue";
import QuestionList from "@/components/Q&A/QuestionList.vue";
import UpdateDialog from "@/components/UpdateAvatarDialog.vue";
import { queryUserInfo } from "@/utils/api/user";
import { onMounted, reactive, ref } from "vue";

const changeUserName = ref(false);

const avatar = ref("");


const userData = reactive({
  userName: "Elon Musk",
  answerQuantity: "125",
  throwQuantity: "256",
  likeQuantity: "520",
  phoneNumInvisible: "136****8896",
  phoneNum: "13685208896",
  captcha: "",
  userReputation: ""

});

onMounted(() => {
  queryUserInfo().then((res) => {

    avatar.value = "http://81.70.162.219:7345/upload/" + res.data.file_table.file_path;
    userData.userName = res.data.name;
    userData.phoneNum = res.data.mobile;
    userData.throwQuantity = res.data.question_count;
    userData.answerQuantity = res.data.answer_count;
    userData.userReputation = res.data.question_reputation;
  });

});
const handelChangeUserName = () => {
  changeUserName.value = false;
};


</script>

<style scoped>

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
}

</style>
